import React from 'react';
import defaultsDeep from 'lodash-es/defaultsDeep';
import Empty from '../empty/index';
import Topo from'./Topo';

class VisTopo extends React.Component {
    constructor(props) {
        super(props);
    }

    draw(){
        const { data = {}, option = {}, optionStyle = {} } = this.props;
        const _option = defaultsDeep(option, {
            dom: this.dom,
            data: data,
            optionStyle:optionStyle,
            automaticLayout:true,//是否自动布局
            tension:false,//是否开启张力效果
            defaultNode: {//节点默认配置
                shape:'circle',
                size:50,
                color:'#21CEFF'
            },
            defaultEdge:{//线的默认配置
                shape: 'line',//基础的线类型，目前支持 line、lineRadian;(line 直接连接两个节点，lineRadian 弧度接两个节点)
                size:2,//线的宽度
                endArrow:true,//是否开启箭头
                color:'#00C8FF',//线的颜色
                animation:{
                    show:true,
                    pointColor:'#55daff',//动画点的颜色
                },
            },
            events: {
                'node:click':function(event){}, //点击节点的时候
                click:function(ev){},           // 鼠标左键单击事件
                dblclick:function(ev){},        // 鼠标左键双击事件
                mousedown:function(ev){},       // 鼠标左键按下事件
                mouseup:function(ev){},         // 鼠标左键抬起事件
                mousemove:function(ev){},       // 鼠标移动事件
                contextmenu:function(ev){},     // 鼠标右键点击事件
                mouseenter:function(ev){},      // 鼠标进入元素事件
                mouseleave:function(ev){},      // 鼠标离开元素事件
                keydown:function(ev){},         // 键盘按键按下事件
                keyup:function(ev){},           // 键盘按键抬起事件
                mousewheel:function(ev){},      // 鼠标滚轮事件
                itemactived:function(ev){},     // 子项激活后事件
                itemunactived:function(ev){},   // 子项取消激活后事件
                itemhover:function(ev){},       // 子项鼠标悬浮事件
                itemupdate:function(ev){},      // 子项更新后事件
                itemremove:function(ev){},      // 子项移除后事件
                itemadd:function(ev){},         // 添加子项结束后
                itemmouseenter:function(ev){},  // 子项鼠标进入事件
                itemmouseleave:function(ev){},  // 子项鼠标离开事件
                afteritemrender:function(ev){}, // 子项渲染结束后事件
            }
        });
        this.G6 = new Topo(_option);
    }

    componentDidMount() {
        this.draw();
    }

    componentDidUpdate() {
        const { data = {} } = this.props;
        let arr = Object.keys(data);
        if(arr.length == 0) return false;
        let {update = null} = this.G6;
        update(data);
    }

    render() {
        let {data = {},optionStyle = {}} = this.props;
        let arr = Object.keys(data);
        return  <div id="G6" style={{position:'absolute',...optionStyle}}>
            {
                arr.length == 0 && <Empty/>
            }
            <div style={{width:optionStyle.width,height:optionStyle.height}} ref={(e) => { this.dom = e; }}></div>
        </div>;
    }
}

export default VisTopo;